@charset "utf-8";
/*
 * 全局 通知提醒 Notice
 */
.fc-message-box {z-index:9999999999;position: fixed;top:0;left:0;width:100%;text-align:center;pointer-events: none;}
.fc-message-box[offset="c"] {top:45%;margin-top:-35px;}
.fc-message-box[offset="rb"] {right:0;left:auto;bottom:0;display: flex;flex-direction: column-reverse;height:100%;}
.message-notice {font-size:14px;transition: all .3s ease;margin-bottom:10px;pointer-events:none;}
.fc-message-box[offset="rb"] .notice-slide-fadeIn {
    opacity: 0;
    -webkit-animation:notice-slide-fadeIn-bottom .3s ease both;
            animation:notice-slide-fadeIn-bottom .3s ease both;    
}
.fc-message-box[offset="rb"] .notice-slide-fadeOut {
    opacity: 1;transform: translateY(-20px);
    -webkit-animation:notice-slide-fadeOut-bottom .3s ease-out both;
            animation:notice-slide-fadeOut-bottom .3s ease-out both;    
}


.message-notice[position="left"] {text-align:left;}
.message-notice[position="left"] p {margin-left: 20px;}
.message-notice[position="right"] {text-align:right;left:auto;}
.message-notice[position="right"] p {margin-right: 20px;}
.message-notice p {display:inline-block;min-width:200px;max-width: 600px;padding:12px 25px 12px 42px;color:#fff;border:1px solid #1E9FFF;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.15);background:#1E9FFF;text-align:left;position: relative;line-height:22px;pointer-events:all;}
.message-notice p i {position: absolute;top:15px;left:13px;}
.message-notice.success p {background-color: #06988a;border-color:#06988a;color:#fff;}
.message-notice.warning p {background-color: rgba(232,168,3,0.98);border-color:rgba(232,168,3,0.98);color:#fff;}
.message-notice.error p {background-color: rgba(255,87,34,0.98);border-color:rgba(255,87,34,0.98);color:#fff;}
.message-notice.loading p {background-color:#fff;border-color:#e8e8e8;color:#444;}
.message-notice.custom .inner {position: relative;pointer-events:all;}
.message-notice.custom .inner em {position: absolute;right:25px;cursor: pointer;display: inline-block;width:24px;height:24px;text-align:center;}


.message-notice p em {position: absolute;right:5px;top:11px;cursor: pointer;display: inline-block;width:24px;height:24px;text-align:center;}
.message-notice p em svg {vertical-align: middle;fill:#ffffff;}




.notice-slide-fadeIn {
    opacity: 0;
    -webkit-animation:notice-slide-fadeIn .3s ease both;
            animation:notice-slide-fadeIn .3s ease both;    
}
.notice-slide-fadeOut {
    opacity: 1;transform: translateY(35px);
    -webkit-animation:notice-slide-fadeOut .3s ease-out both;
            animation:notice-slide-fadeOut .3s ease-out both;    
}

/*从上往下滑动*/
@-webkit-keyframes notice-slide-fadeIn {
    to {
        opacity: 1;transform: translateY(35px);
    }
}
@keyframes notice-slide-fadeIn {
    to {
        opacity: 1;transform: translateY(35px);
    }
}

/*离开恢复*/
@-webkit-keyframes notice-slide-fadeOut {
    to {
        opacity: 0;transform: translateY(0);
    }
}
@keyframes notice-slide-fadeOut {
    to {
        opacity: 0;transform: translateY(0);
    }
}

/*右下角向上滑动*/
@-webkit-keyframes notice-slide-fadeIn-bottom {
    to {
        opacity: 1;transform: translateY(-20px);
    }
}
@keyframes notice-slide-fadeIn-bottom {
    to {
        opacity: 1;transform: translateY(-20px);
    }
}

/*离开恢复 右下角*/
@-webkit-keyframes notice-slide-fadeOut-bottom {
    to {
        opacity: 0;transform: translateY(-10px);
    }
}
@keyframes notice-slide-fadeOut-bottom {
    to {
        opacity: 0;transform: translateY(-10px);
    }
}

/*loading svg动画*/
.message-notice .circular {
    height: 22px;
    width: 22px;
    margin-top:-3px;
    animation: loading-rotate 2s linear infinite;
}
.message-notice .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90,150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: #4d4d4d;
    stroke-linecap: round;
}
@keyframes loading-rotate {
    to {
        transform: rotate(1turn)
    }
}
@keyframes loading-dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -40px
    }
    to {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -120px
    }
}
